#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>

</style>
#end

#define js()
<script type="text/javascript">
    layui.use(['form', 'layer', 'element', 'laydate', 'upload'], function () {
        var layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , element = layui.element
            , laydate = layui.laydate
            , upload = layui.upload;

        //创建监听函数
         var xhrOnProgress=function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
             //使用闭包实现监听绑
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                 //判断监听函数是否为函数
                  if (typeof xhrOnProgress.onprogress !== 'function')
                       return xhr;
                   //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                          xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
             }
         }

        form.val("formTest", {
            "affectedGroup.occupation": $('#occupationSelected').val()
            , "affectedGroup.duty": $('#dutySelected').val()
            , "affectedGroup.politics": $('#politicsSelected').val()
            , "affectedGroup.nation": $('#nationSelected').val()
            , "affectedGroup.education": $('#educationSelected').val()
            , "affectedGroup.nationality": $('#nationalitySelected').val()
        });

         var identity = '#(person.identity)';

        upload.render({
            elem: '#upload'
            , url: '#(ctxPath)/util/uploadFile'
            , accept: 'file'
            , exts: 'pdf|png|jpeg|jpg'
            , data: {
                description: "身份证证件照片"
            }
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('upload-progress', value+'%')//设置页面进度条
            }
            , before: function (res) {
                $('#upload-progress').removeClass('layui-hide');
            }, done: function (res) {
                <!--$('.loading-bg').remove();-->
                $('#upload-progress').addClass('layui-hide');
                if (res.code == 0) {
                    layer.msg("身份证证件照片上传成功");
                    $('#person\\.identity').val(res.data.fileId);
                    identity = res.data.fileId;
                    $('#upload').text("已上传");
                } else if (res.code == 1) {
                    layer.msg("身份证证件照片文件上传错误，请重新选择上传！");
                }
            }
            , error: function (index, upload) {
            $('#upload-progress').addClass('layui-hide');
                $('#upload-progress').addClass('layui-hide');
                layer.msg("身份证证件照片文件上传错误，请重新选择上传！");
            }
        });

        var se = $(".layui-select-title");
        form.on('submit(sub)', function (data) {
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/app/person/postUpdate',
                data: $('#person').serialize(),
                loadFlag: true,
                success: function (data) {
                    layer.msg('编辑成功');
                    $(".layui-btn").addClass("layui-hide");
                    $(":input").addClass("layui-disabled").prop("disabled", "disabled");
                    $('#upload').text("已上传");
                    $('#see').removeClass('layui-hide layui-disabled').prop("disabled", "");
                    $("#perfect").removeClass("layui-hide layui-disabled").prop("disabled", "");
                    setTimeout(function () {
                        return true;
                    }, 3000);
                },
                error: function (data) {
                    console.log(data);
                }
            });
            return false;
        });

        laydate.render({
            elem: document.getElementById('affectedGroup.birthday'),
            max:0
        });

        $('#reset').click(function () {
            window.location.reload();
        });

        se.removeClass("layui-select-title");
        $(".layui-btn").addClass("layui-hide");
        $(":input").addClass("layui-disabled").prop("disabled", "disabled");
        $('#perfect').click(function () {
            $(":input[disabled='disabled']").removeClass("layui-disabled").removeProp("disabled");
            $('#affectedGroup.birthday').removeClass("layui-disabled");
            $(".layui-btn").removeClass("layui-hide");
            $(this).addClass("layui-hide");
            se.addClass("layui-select-title");
            $('#upload').removeClass("layui-hide");
            return false;
        }).removeClass("layui-hide layui-disabled").prop("disabled", "");

        // if (identity)
        if (identity != null || identity !== "") {
            $('#person\\.identity').val(identity);
        }

        $('#see').removeClass('layui-hide layui-disabled').prop("disabled", "").click(function () {
            if (identity == null || identity === "") {
                layer.msg("对不起，您当前没有上传身份证证件照片！");
            } else {
                pop_show('查看身份证证件照片', '#(ctxPath)/util/pdfView?fileID=' + identity, '', '', function () {});
            }
        });

        form.verify({
            duty: function (value, item) {
                if (value === "" || value.trim() === "") {
                    return "请选择 工作信息 - 职务"
                }
            },
            occupation: function (value, item) {
                if (value === "" || value.trim() === "") {
                    return "请选择 工作信息 - 职业"
                }
            }
        });
    });
</script>
#end

#define content()
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>个人资料</legend>
    </fieldset>

    <form id="person" class="layui-form x-center" action="" lay-filter="formTest">
        <div class="layui-form-pane">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">个人资料</li>
                    <li>联系方式</li>
                    <li>工作信息</li>
                    <li>家庭信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px">用户账号</label>
                            <div class="layui-input-inline">
                                <p style="margin-left: 20px;margin-top: 8px">#(person.user.name)</p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px">用户姓名</label>
                            <div class="layui-input-inline">
                                <p style="margin-left: 20px;margin-top: 8px">#(person.name)</p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.othername"
                                   style="width: 160px">曾用名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="affectedGroup.othername" name="affectedGroup.othername"
                                       value="#(affectedGroup.othername)" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px">性别</label>
                            <div class="layui-input-inline">
                                <p style="margin-left: 20px;margin-top: 8px">#(person.sex)</p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.birthday" style="width: 160px"><em
                                    class="require-mark">*</em>出生日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="affectedGroup.birthday" name="affectedGroup.birthday"
                                       value="#(affectedGroup.birthday)" class="layui-input" required
                                       lay-verify="date" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="layui-progress layui-hide" style="margin-bottom:10px" lay-showpercent="true" id="upload-progress" lay-filter="upload-progress" >
                            <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="upload" style="width: 160px"><em
                                    class="require-mark">*</em>身份证证件照片</label>
                            <div class="layui-input-block">
                                <div class="layui-upload ">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn layui-hide" name="upload" id="upload">
                                            <i class="layui-icon"></i>上传文件
                                        </button>
                                        <button type="button" class="layui-hide" id="uploadBtn"></button>
                                        <input class="layui-hide" type="text" id="person.identity"
                                               name="person.identity">
                                        <button type="button" class="layui-btn" id="see">查看</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.nationality" style="width: 160px"><em
                                    class="require-mark">*</em>国籍</label>
                            <div class="layui-input-inline">
                                <input type="hidden" id="nationalitySelected" name="nationalitySelected"
                                       value="#(affectedGroup.nationalityID)"/>
                                <select id="affectedGroup.nationality" name="affectedGroup.nationalityID"
                                        lay-verify="required">
                                    #if(thisCountry != null)
                                    <option value="#(thisCountry.id)" selected>#(thisCountry.name)</option>
                                    #else
                                    <option value=""></option>
                                    #end
                                    #statusOption(contryStatus);
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.nation" style="width: 160px"><em
                                    class="require-mark">*</em>民族</label>
                            <div class="layui-input-inline">
                                <input type="hidden" id="nationSelected" name="nationSelected"
                                       value="#(affectedGroup.nationID)"/>
                                <select id="affectedGroup.nation" name="affectedGroup.nationID" lay-verify="required">
                                    #if(thisNation != null)
                                    <option value="#(thisNation.id)" selected>#(thisNation.name)</option>
                                    #else
                                    <option value=""></option>
                                    #end
                                    #statusOption(nationStatus);
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.politics" style="width: 160px"><em
                                    class="require-mark">*</em>政治面貌</label>
                            <div class="layui-input-inline">
                                <input type="hidden" id="politicsSelected" name="politicsSelected"
                                       value="#(affectedGroup.politicsID)"/>
                                <select id="affectedGroup.politics" name="affectedGroup.politicsID"
                                        lay-verify="required">
                                    #if(thisPolitical != null)
                                    <option value="#(thisPolitical.id)" selected>#(thisPolitical.name)</option>
                                    #else
                                    <option value=""></option>
                                    #end
                                    #statusOption(politicalOpts);
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.education" style="width: 160px"><em
                                    class="require-mark">*</em>学历</label>
                            <div class="layui-input-inline">
                                <input type="hidden" id="educationSelected" name="educationSelected"
                                       value="#(affectedGroup.educationID)"/>
                                <select id="affectedGroup.education" name="affectedGroup.educationID"
                                        lay-verify="required">
                                    #if(thisEducational != null)
                                    <option value="#(thisEducational.id)" selected>#(thisEducational.name)</option>
                                    #else
                                    <option value=""></option>
                                    #end
                                    #statusOption(educationalStatus);
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px"><em
                                    class="require-mark">*</em>电话号码</label>
                            <div class="layui-input-inline">
                                <input value="#(person.phone)" name="person.phone" lay-verify="phone|required"
                                       class="layui-input layui-disabled" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px">邮箱</label>
                            <div class="layui-input-inline">
                                <p  style="margin-left: 20px;margin-top: 8px">#(person.user.email)</p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.residence" style="width: 160px"><em
                                    class="require-mark">*</em>长期居住地址</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <input type="text" id="affectedGroup.residence" name="affectedGroup.residence"
                                       value="#(affectedGroup.residence)" class="layui-input" required/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.occupation"
                                   style="width: 160px">职业</label>
                            <div class="layui-input-inline">
                                <select id="affectedGroup.occupation" name="affectedGroup.occupationID"
                                        lay-verify="occupation">
                                    <option value=""></option>
                                    #if(thisOccupation != null)
                                    <option value="#(thisOccupation.id)" selected>#(thisOccupation.name)</option>
                                    #end
                                    #statusOption(occupationOpts);
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.duty" style="width: 160px">职务</label>
                            <div class="layui-input-inline">
                                <select id="affectedGroup.duty" name="affectedGroup.dutyID"
                                        lay-verify="duty">
                                    <option value=""></option>
                                    #if(thisPost != null)
                                    <option value="#(thisPost.id)" selected>#(thisPost.name)</option>
                                    #end
                                    #statusOption(postStatus);
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label" for="affectedGroup.resume">
                                <h style="margin: 0 30px">工作简历</h>
                            </label>
                            <div class="layui-input-block">
                            <textarea id="affectedGroup.resume" name="affectedGroup.resume"
                                      placeholder="请输入内容" class="layui-textarea">#(affectedGroup.resume)</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.census" style="width: 160px">户籍</label>
                            <div class="layui-input-inline">
                                <input type="text" id="affectedGroup.census" name="affectedGroup.census"
                                       value="#(affectedGroup.census)" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.maritalstatus"
                                   style="width: 160px">婚姻状况</label>
                            <div class="layui-input-block" id="affectedGroup.maritalstatus">
                                <input type="radio" name="affectedGroup.maritalstatus" value="已婚" title="已婚">
                                <input type="radio" name="affectedGroup.maritalstatus" value="未婚" title="未婚" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="affectedGroup.children"
                                   style="width: 160px">子女情况</label>
                            <div class="layui-input-inline">
                                <input type="text" id="affectedGroup.children" name="affectedGroup.children"
                                       value="#(affectedGroup.children)" class="layui-input"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="sub">立即提交</button>
                    <button class="layui-btn layui-btn-warm layui-hide" id="reset">取消</button>
                    <button class="layui-btn layui-btn-normal" id="perfect">完善资料</button>
                </div>
            </div>
        </div>
    </form>
    <hr>
</div>

#end